<template>
	<z-paging ref="paging" bg-color="#F4F6F8" v-model="list" @query="getPageList" empty-view-text="暂无数据"
		:empty-view-img-style="{width:'150rpx',height:'150rpx'}" :empty-view-title-style="{marginTop: '30rpx'}">
		<template #refresher="{refresherStatus}">
			<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
			<custom-refresher :status="refresherStatus" />
		</template>

		<template #top>
			<view class="bg-white radius20 centerY pad-30">
				<view>户头：</view>
				<view class="mar-left-10 picker betweenX" @click="isPicker = true">
					<view class="color-646464">{{userInfo.holder_username}}</view>
					<up-icon name="arrow-down" size="24rpx"></up-icon>
				</view>
			</view>
			<up-picker @cancel="isPicker = false" @confirm="hanldeConfirm" :show="isPicker" :columns="[userList]"
				keyName="holder_username"></up-picker>
		</template>
		<up-checkbox-group v-model="checkboxValue" placement="column">
			<view class="list pad-30 bg-white mar-bottom-30" v-for="item in list" :key="item.id">
				<up-checkbox placement="column" :name="item.id" :customStyle="{marginTop: '8rpx',width:'100%'}"
					size="36rpx" labelSize="26rpx" shape="circle">
					<template #label>
						<view class="betweenX">
							<view class="font-30 font-w-500">用水量: {{item.consumption}}</view>
							<view class="address color-error font-30 font-w-500 mar-left-10">{{item.need_pay_amount}} 元</view>
						</view>
						<view class="font-26 mar-top-10 color-646464">
							<text>{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}</text>
						</view>
					</template>
				</up-checkbox>
			</view>
		</up-checkbox-group>
		<template #bottom>
			<view class="pad-24">
				<view @click="submit" class="button-style">确认开票</view>
			</view>
		</template>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue';
	import { monthlyReport } from '@/api/index.js';
	import { userMeterAll } from '@/api/user.js';
	import { onLoad } from '@dcloudio/uni-app';
	import { timeFormat } from '@/node_modules/uview-plus';

	const paging = ref(null);
	const list = ref([]);
	const userList = ref([]);
	const param = ref({});
	const userInfo = ref({});
	const isPicker = ref(false);
	const checkboxValue = ref([]);

	onLoad((option) => {
		getUserMeterAll();
	});

	// 获取所以水表
	const getUserMeterAll = () => {
		userMeterAll().then(res => {
			if (res?.code == 200) {
				userList.value = res?.data?.lists.map(item => {
					return { ...item, ...item.water_meter }
				});
				userInfo.value = userList.value[0];
			}
		})
	}

	// 确认提交
	const submit = () => {
		if (checkboxValue.value.length > 0) {
			uni.setStorageSync('saveId', checkboxValue.value);
			uni.navigateBack();
		} else {
			uni.$u.toast('请选择要开的票');
		}
	}

	// 切换用户
	const hanldeConfirm = (e) => {
		userInfo.value = e.value[0];
		isPicker.value = false;
		getPageList(1, 10)
	}

	// 获取月度报表
	const getPageList = (page, pageSize) => {
		if (userList.value.length > 0) {
			monthlyReport({
				page,
				ps: pageSize,
				water_meter_id: userInfo.value.water_meter_id,
				settle_status: 1,
				applied_invoice: 2
			}).then(res => {
				if (res?.code == 200) {
					paging.value.complete(res.data.data);
				} else {
					paging.value.complete(false);
				}
			})
		}
	}
</script>

<style scoped>
	.button-style {
		padding: 21rpx 0;
		text-align: center;
	}

	.picker {
		width: 240px;
		border: 1rpx solid #D5D5D5;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 6rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
	}

	/deep/.u-checkbox__label-wrap {
		width: 100%;
	}
</style>